<template>
  <div class="aticle_list">
    <div class="list_l">
      <div class="article_title">
        <ul>
          <router-link tag="li" to="/article/label/0" active-class="actived" exact ><a>首页</a></router-link>
          <router-link tag="li" to="/article/label/1" active-class="actived"><a>通告</a></router-link>
          <router-link tag="li" to="/article/label/2" active-class="actived"><a>好书推荐</a></router-link>
         </ul>
      </div>
      <ul clasitme_s="detail-list">
        <li class="qa-item"  v-for="(item,index) in items" :key="index">
          <img :src="item.image" alt="content">
            <div class="content_title">
                <a :href="'/article/detail/'+item.id" class="ydui"> {{item.title}}</a>
                  <p class="p1">
                    <a href="#" v-html="item.url">
                  </a></p>
                  <p>
                    <a href="#">
                      <span>国际在线</span>
                    </a>
                    <span>{{item.createtime}}</span>
                  </p>
            </div>
        </li>
        <li class="qa-item">1</li>
        <li class="qa-item">1</li>
        <li class="qa-item">1</li>
        <li class="qa-item">1</li>
      </ul>

      <div class="block">

        <el-pagination
          layout="prev, pager, next"
          :total="50">
        </el-pagination>
      </div>
    </div>
   </div>
</template>
<script>
    import articleApi from '@/api/article'
    export default {
        asyncData() {
            return articleApi.search(1, 8, {
                state: '0'
            }).then(res => {

                return {
                    total: res.data.data.total,
                    items: res.data.data.rows
                }
            })
        },
    }
</script>

<style>
    .aticle_list {
        width: 80%;
        margin: 0 auto;
        margin-top: 20px;
    }

    .ydui {
        font-size: 16px;
    }

    .actived a {
        color: pink !important;
    }
</style>
